<template>
	<div ref='container' :style='height'>
		<view class="arrow">
			<van-icon @click='onClickLeft' name="arrow-left" />
		</view>
		<SignTitle/>
		<StepBar :step='3'></StepBar>
		<Tips>
			<template #title>
				<view class="title">
					请设置<text class="h_3">APP登录密码</text>
				</view>
			</template>
			<template #main>
				<view class="main">
					<ul class="h_3">
						<li>密码长度8-32位</li>
						<li>最少1个小写字母</li>
						<li>最少1个大写字母</li>
						<li>最少1个数字</li>
					</ul>
				</view>
			</template>
		</Tips>
		<van-form class="Form"  @submit="onSubmit">
			<van-field v-model="password" :type="pwd? 'password':'text'" name="密码" placeholder="请输入密码" @click-right-icon='Show'
				:rules="[{ pattern:pwdREgular, message: regular }]">
				<template #right-icon>
					<van-icon v-if="pwd" name="eye-o" color="#848496" size='20' />
					<van-icon v-else name="closed-eye" color="#848496"  size='20' />
				</template>
			</van-field>
			<van-field v-model="newPassword" :type="pwdB? 'password':'text'" name="密码" placeholder="再次确认密码" @click-right-icon='ShowB'
				:rules="[{ validator:asyncValidator, message: '请输入正确内容' }]">
				<template #right-icon>
					<van-icon v-if="pwdB" name="eye-o" color="#848496" class="icon" size='20'/>
					<van-icon v-else name="closed-eye" color="#848496" class="icon" size='20' />
				</template>
			</van-field>
			<div class="Invitation">
				<text>请填写邀请码</text>
				<van-field v-model="Invitation" class="inputBtm" name="用户名" placeholder="请填写邀请码"
					:rules="[{ required: true, message: regular }]" />
			</div>
			<div class="subButton">
				<subButton native-type="submit">下一步</subButton>
			</div>
		</van-form>
		<view  class="SignIn" @click="LogIn">已有账号？去 <text>登录</text></view>
	</div>
</template>

<script lang="ts" setup>
	import StepBar from '@/components/signIn/StepBar/index.vue'
	import SignTitle from '@/components/signIn/signTitle/index.vue'
	import {Adaptive} from '@/utils/Adaptive'
	import { debounce } from '@/utils/debounce'
	import { showNotify } from 'vant';
	import subButton from '@/components/signIn/subButton/index.vue'
	import Tips from '@/components/signIn/Tips/index.vue'

	import { ref,onMounted } from 'vue';
	import { useStore } from 'vuex'
	const store = useStore()
	// 回到上一页
	const onClickLeft = () => {
		history.back()
	};
	// 输入框的变量
	const password = ref<string>('');
	const newPassword = ref<string>('');
	const Invitation = ref('')
	
	
	// 密码眼睛的切换逻辑
	const pwd  = ref<boolean>(true)
	const pwdB = ref<boolean>(true)
	const Show = ()=>{
		pwd.value = !pwd.value
	}
	const ShowB= ()=>{
		pwdB.value = !pwdB.value
	}
	
	
	//// 控制页面的底色逻辑
	const container = ref()
	const height = ref()
	onMounted(()=>{
		const {boxHeight,windowHeight} = Adaptive(container.value)
		if(boxHeight>windowHeight){
			height.value = {height: '100%'}
		}else{
			height.value = {height: '100vh'}
		}
	})
	
	
	
	// 密码比对的逻辑
	//  定义一个密码的正则表达式
	const pwdREgular = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{8,31}$/
	const regular = ()=>{
		showNotify({ type: 'danger', message: '需要满足以上的条件' });
	}
	// 判断确认密码是否与新密码一样
	const asyncValidator = debounce((val : string) =>
		// 该方法默认创建的promise对象
		new Promise((resolve) => {
			if(newPassword.value!==password.value){
				showNotify({ type: 'danger', message: '密码保持一致' });
			}
			// 判断是否一样
			resolve(newPassword.value === password.value)
	}),300);
	
	// const result =ref()
	// 提交下一步的按钮
	const onSubmit = async ()=>{
		store.state.sign.inviteCode = Invitation.value
		console.log(newPassword.value)
		store.state.sign.password =  newPassword.value
		uni.navigateTo({
			url: '/SignSubcontract/secure/index'
		})
	}
	
	// 点击回到登入页面的事件
	const LogIn = ()=>{
		uni.navigateTo({
			url: '/pages/login/index'
		})
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 28px;
		color: #b0b0b3;
		.h_3{
			font-weight: 600;
			color: white;
		}
	}
	.main{
		font-size: 28px;
		color: #b0b0b3;
		.h_3{
			padding-left: 40px;
			li{
				list-style-type:circle ;
				line-height: 40px;
			}
		}
	}
	::v-deep.van-cell-group {
		background: transparent;
	}
	.van-cell {
		height: 120px;
		background: #393759;
		opacity: 0.9;
		border-radius: 24px;
		border: 1px solid black;
		margin-bottom: 24px;
	}
	::v-deep.van-field__body {
		height: 96px;
		text-align: center;
	}
	::v-deep.van-field__control {
		font-size: 32px;
		color: white;
		text-align: center;
	}
	.Form{
		padding: 0  40px;
	}
	.icon{
		font-size: 20px;
	}
	.arrow {
		position: fixed;
		z-index: 1000;
		top: 80px;
		left: 40px;
	
		.van-icon {
			color: white;
			font-size: 40px;
		}
	}
	// 邀请码样式
	.Invitation{
		margin-top: 60px;
		margin-bottom: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text{
			display: flex;
			justify-content: center;
			font-size: 28px;
			color: white;
			width: 35%;
			height: 100%;
		}
	}
	.inputBtm{
		margin-bottom: 0;
		width: 65%;
	}
	.subButton{
		padding-bottom: 200px;
	}
	.SignIn {
		position: absolute;
		bottom: 24px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 28px;
		color: white;
		text{
			color: #0aa997;
		}
	}
	::v-deep.van-cell:after{
		display: none;
	}
	::v-deep.van-field__error-message{
		display: none;
	}
	::v-deep.van-notify--danger {
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
		padding: 15px 0;
	}
</style>